<template>
  <div v-if="!loading1&&!loading2&&!loading3" class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
    </el-form>

    <el-table v-loading="loading" :data="dataList2" @selection-change="handleSelectionChange" row-key="indicatorName"
              :default-expand-all="isExpandAll"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column label="编号" align="center" prop="id"/>
      <el-table-column label="指标名称" align="center" prop="indicatorName" :show-overflow-tooltip="true"/>
      <el-table-column label="各项指标得分" align="center" prop="indicatorValue" :formatter="formatTwoDecimal"
                       :show-overflow-tooltip="true"></el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getIndicatorList"
    />

    <!--修改对话框 暂时无用-->
    <el-dialog :title="title" :visible.sync="isUpdateDialogOpen" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="修改值" prop="status">
          <el-input v-model="form.dictName" placeholder="请输入修改后的值"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!--跟踪对话框-->
    <el-dialog :title="title" :visible.sync="isPathDialogOpen" width="500px" append-to-body>
      <div class="timeline">
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in timelineData"
            :key="index"
            :timestamp="item.timestamp"
            :placement="index % 2 === 0 ? 'left' : 'right'"
            color="blue">
            {{ item.content }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {listIndicatorEvaluationScoreByResult} from "@/api/evaluate/IndicatorEvaluationScore"
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {getIndicatorsTree} from "@/api/indicator/indicator";

export default {
  name: "score",
  data() {
    return {
      // 遮罩层
      loading1: true,
      loading2: false,
      loading3: true,
      activeName: 'first',
      // 显示搜索条件
      showSearch: true,
      indicatorScoreData:
        [
          {
            indicatorId: undefined, // 将indicatorId作为分类名称
            indicatorValue: undefined
          },
        ],
      dataList2: [
        {},
      ],
      // 弹出层标题
      title: "",
      // 新增对话框显示状态，默认为false
      isAddDialogOpen: false,
      // 修改对话框显示状态，默认为false
      isUpdateDialogOpen: false,
      // 查看对话框显示状态，默认为false
      isViewDialogOpen: false,
      // 跟踪对话框显示状态，默认为false
      isPathDialogOpen: false,
      // 新增对话框显示状态，默认为false
      isAddDialogOpen2: false,
      // 修改对话框显示状态，默认为false
      isUpdateDialogOpen2: false,
      // 查看对话框显示状态，默认为false
      isViewDialogOpen2: false,
      // 跟踪对话框显示状态，默认为false
      isPathDialogOpen2: false,
      // 是否展开，默认全部折叠
      isExpandAll: true,
      // 重新渲染表格状态
      refreshTable: true,
      // 查询参数
      queryParams: {
        menuName: undefined,
        visible: undefined
      },

      // 表单参数
      form: {},
      // 表单校验
      rules: {
        menuName: [
          {required: true, message: "菜单名称不能为空", trigger: "blur"}
        ],
        orderNum: [
          {required: true, message: "菜单顺序不能为空", trigger: "blur"}
        ],
        path: [
          {required: true, message: "路由地址不能为空", trigger: "blur"}
        ]
      },
      indicatorData:
        {
          indicatorName: undefined,
          indicatorLevel: undefined,
          parentIndicatorId: undefined,
          id: undefined,
        },

      // 用户导入参数
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        // headers: {Authorization: "Bearer " + getToken()},
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/business/talkrecord/importAllRecords"//文件上传路径
      },
    };
  },
  created() {
    this.getIndicatorList();
  },
  async mounted() {
  },
  methods: {
    formatTwoDecimal(row, column, cellValue) {
      return cellValue != null ? parseFloat(cellValue).toFixed(2) : '';
    },
    selected(name) {
      this.form.icon = name;
    },
    getIndicatorEvaluationScoreByResult() {
      this.loading1 = true;
      listIndicatorEvaluationScoreByResult(this.$store.state.evaluate.id)
        .then(response => {
          const indicatorValueMap = new Map();

          response.data.forEach(item => {
            indicatorValueMap.set(item.indicatorId, item.indicatorValue);
          });
          // console.log(response.data);
          this.updateIndicatorValuesRecursively(this.dataList2, indicatorValueMap);
          //过滤没有childern的项
          this.dataList2 = this.dataList2.filter(item => item.children?.length>0);
          //过滤datalist2中没有indicatorValue的节点
          // console.log(this.dataList2);
          this.loading1 = false;
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });

    },

// 递归函数用于更新树结构中每个节点的indicatorValue
    updateIndicatorValuesRecursively(nodes, indicatorValueMap) {
      return nodes.filter(node => {
        let hasIndicatorValue = indicatorValueMap.has(node.id);

        // 如果有 indicatorValue，就设置它
        if (hasIndicatorValue) {
          this.$set(node, 'indicatorValue', indicatorValueMap.get(node.id));
        }

        // 如果有子节点，则递归处理子节点
        if (node.children) {
          node.children = this.updateIndicatorValuesRecursively(node.children, indicatorValueMap);
        }

        // 需要保留的条件：自身有 indicatorValue，或有子节点（即 node.children 不为空）
        const shouldKeep = hasIndicatorValue || (node.children && node.children.length > 0);

        return shouldKeep;
      });
    },

    /** 查询菜单列表 */
    async getList() {
      //this.loading2 = true;
      //listMenu(this.queryParams).then(response => {
      //this.menuList = this.handleTree(response.data, "menuId");
      //this.loading2 = false;
      //});
    },
    async getIndicatorList() {
      this.loading3 = true;
      getIndicatorsTree().then(response => {
        this.dataList2 = response.rows;
      }).then(() => {
        this.getIndicatorEvaluationScoreByResult();
        this.loading3 = false;
      })
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        menuId: undefined,
        parentId: 0,
        menuName: undefined,
        icon: undefined,
        menuType: "M",
        orderNum: undefined,
        isFrame: "1",
        isCache: "0",
        visible: "0",
        status: "0"
      };
      this.resetForm("form");
    },

  },

};
</script>

<style scoped>

</style>
